<template>
  <div class="content">
    <el-row type="flex" align="middle">
      <el-col :span="12">
        <span style="float: left; margin-left: 20px; font-size: 20px; font-weight: 800">我的合同</span>
      </el-col>
      <el-col :span="12">
        <el-button type="primary" style="float: right; margin-right: 20px" @click="newContract">创建合同</el-button>
      </el-col>
    </el-row>
    <div class="tab-menu" style="margin: 20px; background-color: white">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="履约合同" name="first">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="合同名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="合同额（单位：万元）"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column
              prop="address"
              label="客户名称"
              align="center">
            </el-table-column>
            <el-table-column
              prop="address"
              label="签订时间"
              align="center">
            </el-table-column>
            <el-table-column
              label="操作"
              align="center">
              <span class="operation">进入项目</span>
              <span class="operation">查看付款节点</span>
              <span class="operation">合同正文预览</span>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已交付合同" name="second">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContractList',
  data () {
    return {
      activeName: 'first',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    newContract () {
      console.log('新增合同点击')
      // const data = 'newContract'
      // this.$emit('childEvent')
      this.$parent.currentComponent = 'newContract'
    }
  }
}
</script>

<style>
.content {
  padding-top: 20px;
  padding-bottom: 10px;
  background-color: #e9edf7;
}

.tab-menu {
  margin: 20px;
  padding: 10px;
  background-color: white
}

.operation {
  padding: 8px;
  color: #1989FA;
}
</style>
